<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
                 label-width="68px">
            <el-form-item label="表单名称" prop="name">
                <el-input v-model="queryParams.name" placeholder="请输入表单名称" clearable @keyup.enter.native="handleQuery"/>
            </el-form-item>
            <el-form-item label="表单分类" prop="category">
                <el-select v-model="queryParams.category" placeholder="请选择表单分类" clearable>
                    <el-option v-for="dict in dict.type.oa_customform_category" :key="dict.value" :label="dict.label"
                               :value="dict.value"/>
                </el-select>
            </el-form-item>
            <el-form-item label="申请流程" prop="flowKey">
                <el-input v-model="queryParams.flowKey" placeholder="请输入申请流程" clearable @keyup.enter.native="handleQuery"/>
            </el-form-item>
            <el-form-item label="流程名称" prop="flowName">
                <el-input v-model="queryParams.flowName" placeholder="请输入流程名称" clearable @keyup.enter.native="handleQuery"/>
            </el-form-item>
            <el-form-item label="申请标题" prop="applyTitle">
                <el-input v-model="queryParams.applyTitle" placeholder="请输入申请标题" clearable @keyup.enter.native="handleQuery"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <TableCard>
            <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                    <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['oa:myApply:add']">创建申请</el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['oa:myApply:export']">导出</el-button>
                </el-col>
                <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
            </el-row>
            <!--列表-->
            <el-table  :border="Global.tableShowBorder" v-loading="loading" :data="myApplyList">
                <el-table-column type="selection" width="55" align="center"/>
                <el-table-column label="表单名称" align="center" prop="name"/>
                <el-table-column label="表单分类" align="center" prop="category">
                    <template slot-scope="scope">
                        <dict-tag :options="dict.type.oa_customform_category" :value="scope.row.category"/>
                    </template>
                </el-table-column>
                <el-table-column label="申请流程" align="center" prop="flowKey"/>
                <el-table-column label="流程名称" align="center" prop="flowName"/>
                <el-table-column label="申请标题" align="center" prop="applyTitle" width="300"/>
                <el-table-column label="提交时间" align="center" prop="submitTime" width="180">
                    <template slot-scope="scope">
                        <span>{{ parseTime(scope.row.submitTime, '{y}-{m}-{d}') }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="单据状态" align="center" prop="status" width="180">
                    <template slot-scope="scope">
                        <dict-tag :options="dict.type.oa_flow_billstatus" :value="scope.row.status"/>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" v-show="scope.row.status=='0' || scope.row.status=='3'" icon="el-icon-check" @click="doSubmit(scope.row)" v-hasPermi="['oa:myApply:edit']">提交审批</el-button>
                        <el-button size="mini" type="text" v-show="scope.row.status=='0' || scope.row.status=='3'" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['oa:myApply:edit']">修改</el-button>
                        <el-button size="mini" type="text" v-show="scope.row.status=='0' || scope.row.status=='3'" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['oa:myApply:remove']">删除</el-button>
                        <el-button size="mini" type="text" v-show="scope.row.status=='1'" icon="el-icon-refresh-right" @click="cancelApplyInsId(scope.row)" v-hasPermi="['oa:myApply:remove']" style="color: #ff6666">撤销申请</el-button>
                        <el-button size="mini" type="text" v-show="scope.row.status!='0'" icon="el-icon-rank"          @click="flowDetail(scope.row)" v-hasPermi="['oa:myApply:list']">流程信息</el-button>
                        <el-button size="mini" type="text" v-show="scope.row.status!='0'" icon="el-icon-view"          @click="handleUpdate(scope.row)" v-hasPermi="['oa:myApply:list']">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>
        </TableCard>
        <!-- 选择自定义表单类型 -->
        <el-dialog title="选择自定义表单" :visible.sync="openSelectForm" width="500px" append-to-body>
            <el-form ref="selectedCustomForm" :model="selectedCustomForm" :rules="rules" label-width="80px">
                <el-form-item label="表单分类" prop="category">
                    <el-select key="category" v-model="selectedCustomForm.category" placeholder="请选择表单分类" clearable filterable @change="selectCustomFormCategory">
                        <el-option v-for="dict in dict.type.oa_customform_category" :key="dict.value" :label="dict.label"
                                   :value="dict.value"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="表单名称" prop="name">
                    <el-select key="customForm" v-model="selectedCustomForm.formId" placeholder="请选择表单名称" clearable filterable>
                        <el-option v-for="f in customFormList" :key="f.id" :label="f.name" :value="f.id"/>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="selectCustomForm">确 定</el-button>
                <el-button @click="cancelSelect">取 消</el-button>
            </div>
        </el-dialog>

            <FlowInfo :businessId="businessId+''" billType="custom_form" v-if="showFlowInfo" :showStatus="showFlowInfo" @closeFlowInfoDialog="closeFlowInfoDialog"></FlowInfo>

    </div>
</template>

<script>
import {cancelApplyInsId, delMyApply, listMyApply, submitApply} from "@/api/oa/myApply";
import {listAllCustomForm} from "@/api/oa/customForm";
import FlowInfo from "@/views/workflow/flow/flowInfo";
import {submitFlow,cancleFlow} from "@/api/workflow/processInstance";

export default {
    name: "MyApply",
    dicts: ['oa_customform_category','oa_flow_billstatus'],
    components:{FlowInfo},
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 自定义表单申请表格数据
            myApplyList: [],
            // 弹出层标题
            title: "",
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 20,
                name: null,
                category: null,
                flowKey: null,
                flowName: null,
                applyTitle: null,
                submitTime: null,
                orderByColumn:"createTime",
                isAsc:"descending",
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {},
            //选择自定义表单类型
            openSelectForm:false,
            selectedCustomForm:{},
            customFormCategoryList:[],
            customFormList:[],
            //申请的表单
            openCreateApply: false,
            fapi: null,
            rule: [],
            option: {},
            applyForm:{
                id: null,
                name: "",
                category: "",
                formKey: "",
                flowKey: "",
                flowName: "",
            },
            flowList:[],
            showFlowInfo:false,
            insId:"",
            businessId:""
        };
    },
    created() {
        this.getList();
    },
    methods: {
        /** 查询自定义表单申请列表 */
        getList() {
            this.loading = true;
            listMyApply(this.queryParams).then(response => {
                this.myApplyList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.openSelectForm = true;
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.$router.push({path: "/oa/myApply/createApply/" + row.id,
                query: {createOrApply: "update", formName: row.name}});
        },
        getFormName(){
            this.customFormList.forEach((item,index)=>{
                if(this.selectedCustomForm.formId==item.id){
                    this.selectedCustomForm.name = item.name;
                }
            })
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            if(row.status!="0"&&row.status!="3"){
                this.$modal.msgWarning("请选择【未提交】状态的表单进行删除");
            }else{
                const ids = row.id || this.ids;
                this.$modal.confirm('是否确认删除自定义表单申请编号为"' + ids + '"的数据项？').then(()=> {
                    return delMyApply(ids);
                }).then(() => {
                    this.getList();
                    this.$modal.msgSuccess("删除成功");
                }).catch(() => {
                });
            }
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download('oa/myApply/export', {
                ...this.queryParams
            }, `myApply_${new Date().getTime()}.xlsx`)
        },
        //选择自定义表单分类后，加载自定义表单列表
        selectCustomFormCategory(a){
            this.getCustomFormList(a);
        },
        // selectCustomFormName(a){
        //     console.log(a);
        //     this.selectedCustomForm.formId = a
        // },
        //获取自定义表单的列表
        getCustomFormList(key){
            console.log(key)
            let query = {};
            query.category = key;
            listAllCustomForm(query).then(res=>{
                if(200==res.code){
                    if(res.data&&res.data.length>0){
                        this.customFormList = res.data;
                        // this.selectedCustomForm.formId = res.data[0].id;
                    }else{
                        this.customFormList = [];
                        this.selectedCustomForm.formId = null;
                    }
                }
            })
        },
        //选择自定义表单
        selectCustomForm(){
            // alert(this.selectedCustomForm.formId)
            if(!this.selectedCustomForm.formId){
                this.$modal.msgWarning("请选择自定义表单");
            }else{
                // this.loadFormRulesAndOptions(this.selectedCustomForm.formId);
                // this.getAllFlowList(false);
                this.getFormName();
                this.$router.push({path: "/oa/myApply/createApply/" + this.selectedCustomForm.formId,
                    query: {createOrApply: "create", formName: this.selectedCustomForm.name}});
            }
            this.openSelectForm = false;
        },
        cancelSelect(){
            this.openSelectForm = false;
        },
        cancelMyForm(){
            this.openCreateApply = false;
        },
        warningSubmit(){
            this.$modal.msgWarning("请勿使用自定义表单的提交按钮");
        },
        // 表单重置
        reset() {
            this.applyForm = {
                                    id: null,
                                    name: "",
                                    category: "",
                                    formKey: "",
                                    flowKey: "",
                                    flowName: ""
                            }
        },
        //提交
        doSubmit(row){
            if(!row.flowKey){
                this.$modal.msgWarning("请先对自定义表单绑定流程后，进行提交");
                return;
            }
            let data = {
                businessId:row.id,
                billType: row.billType,
                defKey: row.flowKey
            }
            this.$modal.confirm('是否确认提交该单据？').then(()=> {
                submitFlow(data).then(res=>{
                    if(200==res.code){
                        this.getList();
                        this.$modal.msgSuccess("提交成功");
                    }
                })
            }).catch(() => {
            });
        },
        /** 撤销申请 */
        cancelApplyInsId(row){
            let data = {
                businessId:row.id,
                billType: row.billType
            }
            this.$modal.confirm('是否确认撤销该申请？').then(()=> {
                cancleFlow(data).then(res=>{
                    if(200==res.code){
                        this.getList();
                        this.$modal.msgSuccess("撤销成功");
                    }
                })
            }).catch(() => {
            });
        },
        /** 流程信息 ***/
        flowDetail(row){
            this.businessId = row.id;
            this.showFlowInfo = true;
        },
        //关闭流程信息窗口
        closeFlowInfoDialog(){
            this.showFlowInfo = false;
        },
    }
};
</script>
<style lang="scss" scoped>
    .page-scroll{
        ::v-deep .el-scrollbar__wrap{
            overflow-x: hidden;  /* 隐藏横向的原生滚动条 */
        }
    }
</style>
